<template>
  <div class="select-users">
    <div class="select-users__input-wrap" @click="clickInput">
      <div v-if="multiple" class="select-users__container">
        <el-tag
          v-for="(item, index) in value"
          :key="index"
          :closable="!selectDisabled"
          :size="selectSize"
          hit
          type="info"
          disable-transitions
          @close="deleteItem(item, index)"
        >
          <span class="el-select__tags-text">
            {{ getUserName(item) }}
            <!-- <open-data type='userName' :openid="item"></open-data> -->
          </span>
        </el-tag>
        <span v-if="!value.length" class="select-users__placeholder">{{ placeholder }}</span>
      </div>
      <input v-else class="select-users__input" :placeholder="placeholder" :value="getUserName(value)" readonly />
    </div>

    <v-dialog
      :visible.sync="visible"
      :value="value"
      :multiple="multiple"
      :type="type"
      :deptId="deptId"
      :roles="roles"
      :title="title"
      @input="handleInput"
    />
  </div>
</template>


<script>
import VDialog from './dialog.vue';

export default {
  components: {
    VDialog
  },

  inject: {
    elForm: {
      default: ''
    },

    elFormItem: {
      default: ''
    }
  },

  props: {
    value: {
      type: [Array, String, Number],
      default: null,
    },
    multiple: {
      type: Boolean,
      default: false,
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    placeholder: {
      type: String,
      default: '请选择...'
    },
    type: {
      type: String,
      default: 'tree'
    },
    // 筛选的部门Id
    deptId: {
      type: [String, Number],
      default: 0
    },
    // 筛选的角色Id列表
    roles: {
      type: [String, Number, Array],
      default: null
    },
    title: {
      type: String,
      default: '人员选择'
    },
    size: {
      type: String,
      default: 'small'
    }
  },

  data() {
    return {
      visible: false,
      allUsers: [],
    }
  },

  async created() {
    this.allUsers = await this.$store.dispatch('getAllUser');
  },

  computed: {
    _elFormItemSize() {
      return (this.elFormItem || {}).elFormItemSize;
    },
    selectSize() {
      return this.size || this._elFormItemSize || (this.$ELEMENT || {}).size;
    },
    selectDisabled() {
      return this.disabled || (this.elForm || {}).disabled;
    },
  },

  methods: {
    clickInput() {
      if (this.selectDisabled) {
        return;
      }

      this.visible = true;
    },
    deleteItem(item, index) {
      this.handleInput(this.value.filter(e => e !== item));
    },
    handleInput(value) {
      this.$emit('input', value);
    },
    getUserName(userId) {
      return this.allUsers.find(e => e.id === userId).nickname
    }
  }
}
</script>


<style lang="scss" scoped>
.select-users {
  width: 200px;
  display: inline-block;
  overflow: hidden;

  .select-users__input-wrap {
    display: block;
    padding: 2px 10px;
    line-height: 1.5;
    box-sizing: border-box;
    width: 100%;
    font-size: inherit;
    color: #606266;
    background-color: #fff;
    background-image: none;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
    overflow: auto;
    &::-webkit-scrollbar {
      width: 0;
      height: 0;
    }

    &::placeholder {
      color: #c0c4cc;
    }

    &:hover {
      border-color: #c0c4cc;
    }

    &:focus {
      outline: none;
      border-color: #409eff;
    }

    .select-users__container {
      display: flex;
      white-space: nowrap;
      min-height: 26px;
    }

    .select-users__input {
      display: block;
      width: 100%;
      height: 26px;
      line-height: 26px;
      border-width: 0;
      &:focus {
        border-width: 0;
        outline: none;
      }
      &::placeholder {
        color: #C0C4CC;
      }
    }

    .select-users__placeholder {
      color: #C0C4CC;
      line-height: 26px;
    }
  }

  ::v-deep .el-tag {
    box-sizing: border-box;
    border-color: transparent;
    margin: 1px 6px 1px 0;
    color: #333;
    background-color: #f0f2f5;
    display: flex;
    max-width: 100%;
    align-items: center;

    &__close.el-icon-close {
      top: 0;
      flex-shrink: 0;

      &::before {
        display: block;
        transform: translate(0, 0.5px);
      }
    }
  }
}
</style>
